<template>
	<view class="container">
		<view class="avatar">
			<u--image width="5rem" height="5rem" src="https://cdn.uviewui.com/uview/album/1.jpg"
				shape="circle"></u--image>
		</view>
		<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="75">
			<view class="helper-round-input">
				<u-form-item label="账号" prop="username" borderBottom ref="item1">
					<u--input v-model="form.username" border="none" placeholder="请输入账号"></u--input>
				</u-form-item>
			</view>
			<view class="helper-round-input">
				<u-form-item label="密码" prop="password" borderBottom ref="item1">
					<u--input password v-model="form.password" border="none" placeholder="请输入密码"></u--input>
				</u-form-item>
			</view>
			<!-- 用户协议 -->
			<u-form-item label=" " prop="agreement" class="item">
				<view class="agreement">
					<u-checkbox-group v-model="form.agreement">
						<u-checkbox name="agreement" label="我已阅读并同意" />
						<navigator class="url" url="/pages/index/agreement">用户服务协议、隐私政策</navigator>
					</u-checkbox-group>
				</view>
			</u-form-item>

		</u--form>
		<u-button type="primary" @click="submit">登录</u-button>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					agreement: false
				},
				rules: {
					'username': [{
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					}],
					"password": {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					"agreement": {
						type: 'array',
						required: true,
						message: '请阅读用户协议',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(async (res) => {
					let result = await this.$u.api.admin.login({
						username: this.form.username,
						password: this.form.password
					})
					if (result.code == 0) {
						this.$refs.uToast.show({
							type: 'error',
							message: result.msg
						})
					} else {
						uni.setStorageSync('LoginUser', result.data);
						this.$refs.uToast.show({
							type: 'success',
							message: result.msg,
							complete: function() {
								uni.switchTab({
									url: '/pages/admin/index'
								});
							}
						})
					}
				}).catch(errors => {})
			}
		},
	}
</script>

<style>
	.container {
		height: 100%;
		margin: 0 80rpx;
		box-sizing: border-box;
	}

	.avatar {
		text-align: center;
		margin: 80rpx 0 20rpx 0;
		display: flex;
		justify-content: center;
	}

	.nickname {
		font-size: 14px;
		text-align: center;
	}

	.title {
		text-align: center;
		margin: 40rpx 0;
		font-size: 20px;
	}

	.img-captcha {
		display: block !important;
	}

	.btn-submit {
		margin-top: 40rpx !important;
	}

	.href-bindmobile {
		margin-top: 40rpx;
		text-align: center;
		font-size: 14px;
		color: var(--color-primary);
	}

	.agreement {
		margin-top: .7em;
		display: flex;
	}

	.agreement .url {
		color: #3c9cff;
		margin-left: 2px;
	}
</style>